<template>
<el-row v-loading="loading">
    <el-col :span="24">
        <div id="chart" style="width:100%"></div>
    </el-col>
</el-row>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            loading: true,
        };
    },
    methods: {
        loadData() {
            this.axios.get("/api/data/categoryShow").then((res) => {
                let list = res.data;
                let keys = [];
                let valuses = [];
                for (var key in list) {
                    keys.push(key);
                    valuses.push(list[key].length);
                }
                this.$chart.Ladder("chart", keys, valuses); //方法调用
                this.$message({
                    message: "请求成功",
                    type: "success",
                });
                this.loading = false;
            });
        },
    },
    created() {
        // this.loadData();
    },
    mounted(){
        this.loadData();
    }
};
</script>

<style scoped>
#chart {
    width: 100%;
    height: 80vh;
}
</style>
